Table Of Contents
1
Developing
with
the
SharePoint
Framework
Version: December 2018
Visit the U2U website
www.u2u.be
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
2
Table Of Contents
Copyright © 2000-2018 U2U Training nv/sa, B-1731 Zellik (Brussels), Belgium.
Niets uit dit document mag worden verveelvoudigd en/of openbaar gemaakt door middel van druk,
fotokopie, microfilm, elektronisch of op welke andere wijze ook en evenmin in een retrieval systeem
worden opgeslagen zonder voorafgaande schriftelijke toestemming van de auteur.
Hoewel dit document met zeer veel zorg is samengesteld, aanvaarden de auteurs geen enkele
aansprakelijkheid voor schade ontstaan door eventuele fouten en/of onvolkomenheden in dit
document.
Copyright © 2000-2018 U2U Training nv/sa, B-1731 Zellik (Brussels), Belgium.
No part of this document may be reproduced or transmitted in any form or by any means, electronic
or mechanical, for any purpose, without the express written permission of the author.
This publication is provided "as is" without warranty of any kind, either express or implied, including,
but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-
infringement.
This publication could include technical inaccuracies or typographical errors. Changes are periodically
added to the information herein; these changes will be incorporated in new editions of the
publication.
Published by U2U Training nv/sa, B-1731 Zellik (Brussels), Belgium
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Table Of Contents
3
1
TABLE OF CONTENTS
1
TABLE OF CONTENTS...............................................................................................................3
2
SHAREPOINT FRAMEWORK................................................................................................13
2.1
What is SharePoint Framework......................................................................................... 14
2.2
Why SharePoint Framework? ........................................................................................... 18
2.3
Modern toolchain ............................................................................................................ 20
2.4
The Future ....................................................................................................................... 26
2.5
More Info......................................................................................................................... 27
3
PREPARING YOUR MACHINE ..............................................................................................28
3.1
Setup Office 365............................................................................................................... 29
3.2
Software Installation........................................................................................................ 30
3.3
LAB – Get ready for the Sharepoint Framework................................................................. 33
3.3.1
Setup a tenant..................................................................................................................... 33
3.3.2
Setup your machine ............................................................................................................ 33
4
MODULES...................................................................................................................................34
4.1
Creating a Project............................................................................................................. 35
4.2
Using Modules ................................................................................................................. 37
4.3
CommonJS....................................................................................................................... 40
4.4
Important Modules .......................................................................................................... 43
5
FRAMEWORK CLIENT WEB PARTS...................................................................................44
5.1
What is a Client Web Part? ............................................................................................... 45
5.2
Creating a project............................................................................................................. 47
5.3
Exploring Project Contents ............................................................................................... 48
5.4
Running Your Project........................................................................................................ 54
5.5
Gulp tasks........................................................................................................................ 56
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
4
Table Of Contents
5.6
Web Part Configuration.................................................................................................... 57
5.7
Lab - Create A Sharepoint Framework Web part................................................................ 58
5.7.1
create a Sharepoint client-side solution ............................................................................. 58
5.7.2
Take a look at the generated project.................................................................................. 59
5.7.3
Modify the default content................................................................................................. 61
5.7.3.1
Modify the default web part property......................................................................... 61
5.7.3.2
Modify the property pane settings.............................................................................. 61
5.7.3.3
Modify the web part.................................................................................................... 62
5.7.4
Test on sharepoint .............................................................................................................. 63
5.7.5
To finish up.......................................................................................................................... 64
6
JAVASCRIPT INTRODUCTION.............................................................................................65
7
JAVASCRIPT: THE LANGUAGE ............................................................................................69
7.1
JavaScript......................................................................................................................... 70
7.2
Variables.......................................................................................................................... 71
7.3
Types............................................................................................................................... 72
7.4
Objects ............................................................................................................................ 75
7.5
Functions......................................................................................................................... 79
7.6
Constructors .................................................................................................................... 84
7.7
Prototypes....................................................................................................................... 87
7.8
Error handling.................................................................................................................. 90
7.9
Summary ......................................................................................................................... 91
7.10
Lab – JavaScript Basics .................................................................................................. 93
7.10.1
Before you start................................................................................................................... 93
7.10.2
Creating the project ............................................................................................................ 93
7.10.3
Testing your scripts ............................................................................................................. 94
7.10.4
Exercise 1............................................................................................................................. 95
7.10.5
Exercise 2............................................................................................................................. 95
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Table Of Contents
5
7.10.6
Exercise 3............................................................................................................................. 95
7.10.7
Exercise 4............................................................................................................................. 95
7.10.8
Exercise 5............................................................................................................................. 96
8
JAVASCRIPT PATTERNS........................................................................................................98
8.1
Writing maintainable and performant JavaScript .............................................................. 99
8.2
For Loops........................................................................................................................100
8.3
Callback pattern..............................................................................................................101
8.4
Options hashing ..............................................................................................................102
8.5
Self-invoking function......................................................................................................103
8.6
Modules & Classes ..........................................................................................................104
8.7
The Self Reference...........................................................................................................107
9
TYPESCRIPT ...........................................................................................................................109
9.1
What is TypeScript ..........................................................................................................110
9.2
Usage..............................................................................................................................113
9.3
Language ........................................................................................................................117
9.4
Variables.........................................................................................................................118
9.5
Functions........................................................................................................................122
9.6
Interfaces and Classes .....................................................................................................124
9.7
Modules..........................................................................................................................131
9.8
Summary ........................................................................................................................133
9.9
LAB – Toy Store...............................................................................................................134
9.9.1
Before you start................................................................................................................. 134
9.9.2
Creating the project .......................................................................................................... 134
9.9.3
Making the Models ........................................................................................................... 135
9.9.3.1
create a new folder.................................................................................................... 135
9.9.3.2
Product class.............................................................................................................. 135
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
6
Table Of Contents
9.9.3.3
Category and SubCategory......................................................................................... 136
9.9.3.4
OrderDetail ................................................................................................................ 136
9.9.4
Add some dummy data..................................................................................................... 137
9.9.5
Creating the shoppingCart................................................................................................ 138
9.9.6
Using an External library ................................................................................................... 139
9.9.7
(Optional) ExTra challenge................................................................................................ 144
10
CLIENT WEB PART PROPERTIES.................................................................................145
10.1
Webpart Properties .....................................................................................................146
10.2
Adding Properties........................................................................................................147
10.3
Using Properties ..........................................................................................................149
10.4
Preconfigured Entries...................................................................................................150
10.5
Dynamic Data ..............................................................................................................151
10.6
Custom Properties .......................................................................................................153
10.7
Advanced Configuration...............................................................................................155
11
LOADING SHAREPOINT DATA ......................................................................................157
11.1
Page Context ...............................................................................................................158
11.2
Web Services Overview................................................................................................159
11.3
REST and ODATA Fundamentals ...................................................................................161
11.4
SharePoint REST API's ..................................................................................................164
11.5
AJAX............................................................................................................................167
11.6
Framework SPHttpClient..............................................................................................168
11.7
Solving cross domain issues with CORS.........................................................................173
11.8
Lab - Loading Sharepoint data in a client side web part.................................................174
11.8.1
Creating the project .......................................................................................................... 174
11.8.2
Add web part properties................................................................................................... 175
11.8.2.1
Import the needed classes......................................................................................... 175
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Table Of Contents
7
11.8.3
Load sharepoint LIST data................................................................................................. 178
11.8.3.1
Test in Sharepoint...................................................................................................... 183
11.8.4
Load the selected sharepoint lists items........................................................................... 184
11.8.5
TEST your web part!.......................................................................................................... 188
12
LOADING LIBRARIES AND/OR FRAMEWORKS .......................................................189
12.1
Considerations.............................................................................................................190
12.2
NPM Package...............................................................................................................191
12.3
Loading from a URL......................................................................................................193
12.4
Loading A Local Copy....................................................................................................195
12.5
Loading jQuery and plugins ..........................................................................................196
12.6
Component loader.......................................................................................................197
12.7
Conclusion...................................................................................................................198
13
BUILD AND DEPLOY A FRAMEWORK SOLUTION...................................................199
13.1
Overview.....................................................................................................................200
13.2
Bundling......................................................................................................................202
13.3
Packaging ....................................................................................................................207
13.4
Using Your Solution......................................................................................................209
13.5
Deploy to Microsoft Teams ..........................................................................................210
13.6
LAB – Deploying a framework client web part...............................................................213
13.6.1
Before you start................................................................................................................. 213
13.6.2
Create a deployment location........................................................................................... 213
13.6.3
Generate the web part asset files..................................................................................... 213
13.6.4
generate the package........................................................................................................ 215
13.6.5
use the web part ............................................................................................................... 215
That’s it! ...................................................................................................................................215
14
DEPLOYING SHAREPOINT ARTIFACTS......................................................................216
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
8
Table Of Contents
14.1
Deployment Options....................................................................................................217
14.2
Asset Types..................................................................................................................218
14.3
Features ......................................................................................................................221
15
SHAREPOINT FRAMEWORK AND REACT..................................................................224
15.1
Overview.....................................................................................................................225
15.2
MVVM.........................................................................................................................226
15.3
SPFx Bootstrapping......................................................................................................230
15.4
Components ................................................................................................................231
15.5
What is JSX..................................................................................................................233
15.6
JavaScript Expressions..................................................................................................235
15.7
Html Tags vs React Components...................................................................................239
15.8
JSX Gotchas .................................................................................................................240
15.9
Component Properties.................................................................................................243
15.10
Component State.........................................................................................................244
15.11
Interactivity.................................................................................................................247
15.12
Multiple Components ..................................................................................................250
15.13
Transferring props .......................................................................................................253
15.14
Form Components .......................................................................................................256
15.15
Component Lifecycle....................................................................................................258
15.16
Extra............................................................................................................................259
15.17
LAB – React Components - Listing the site permissions..................................................260
15.17.1
Creating the project....................................................................................................... 260
15.17.2
Modify the generated web part class............................................................................ 261
15.17.3
creating the main component....................................................................................... 262
15.17.4
write the http service .................................................................................................... 265
15.17.5
show the data in the component.................................................................................. 266
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Table Of Contents
9
15.17.6
Creating a permission overview component................................................................. 268
15.17.7
Add the permission overview component to the main component............................. 268
15.17.8
finalize the permission overview component ............................................................... 269
15.18
viewing group members...............................................................................................272
15.18.1
add select to permissionlist component ....................................................................... 272
15.18.2
use event on the main component ............................................................................... 272
15.18.3
create the group details component............................................................................. 273
15.18.4
Use the member data in the component...................................................................... 274
15.18.5
Add the group details component to main component................................................ 274
16
SASS .......................................................................................................................................276
16.1
What is SASS?..............................................................................................................277
16.2
The Language...............................................................................................................279
16.3
Variables .....................................................................................................................280
16.4
Types...........................................................................................................................281
16.5
Comments...................................................................................................................285
16.6
Nested Rules and Properties ........................................................................................286
16.7
Partials........................................................................................................................288
16.8
Extend.........................................................................................................................289
16.9
Mixins .........................................................................................................................291
16.10
Functions.....................................................................................................................294
16.11
LAB – SASS in a SharePoint Framework Project.............................................................295
16.11.1
Before you start............................................................................................................. 295
16.11.2
Creating the project....................................................................................................... 295
16.11.3
loading the data............................................................................................................. 296
16.11.4
Extending the SCSS file .................................................................................................. 297
16.11.5
Nesting and extending................................................................................................... 299
16.11.6
mixins............................................................................................................................. 300
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
10
Table Of Contents
16.11.7
Checking the generated CSS code................................................................................. 301
16.11.8
EXTRA: Creating a new SCSS file.................................................................................... 301
16.11.9
EXTRA: Disabling automatic renaming of CSS classes ................................................... 302
17
OFFICE UI FABRIC .............................................................................................................303
17.1
What Is Office UI Fabric?..............................................................................................304
17.2
Office UI Fabric Versions ..............................................................................................305
17.3
Fabric Core Styles.........................................................................................................306
17.4
Example Uses...............................................................................................................310
17.5
Fabric Components ......................................................................................................311
17.6
Fabric JS.......................................................................................................................312
17.7
ngOfficeUIFabric ..........................................................................................................314
17.8
Fabric React.................................................................................................................315
17.9
LAB – using office ui fabric react components ...............................................................316
17.9.1
Before you start................................................................................................................. 316
17.9.2
Create the project............................................................................................................. 316
17.9.3
Start Retrieving Data......................................................................................................... 317
17.9.4
Improve the Appearance .................................................................................................. 318
17.9.5
add a second React Component ....................................................................................... 320
17.9.6
use fabric components to render the facility details........................................................ 321
18
DYNAMIC DATA .................................................................................................................323
18.1
Introduction ................................................................................................................324
18.2
Exposing data ..............................................................................................................325
18.3
Consuming data...........................................................................................................327
18.4
Dynamic Data From Code.............................................................................................329
18.5
Advanced Configuration...............................................................................................330
18.6
Summary.....................................................................................................................331
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Table Of Contents
11
19
CONSUMING AAD SECURED API'S................................................................................332
19.1
Introduction to Microsoft Graph...................................................................................333
19.2
Microsoft Graph API.....................................................................................................335
19.3
Consuming the Microsoft Graph API.............................................................................339
19.4
Registering application in Azure AD..............................................................................342
19.5
API Permissions ...........................................................................................................347
19.6
Consuming AAD protected API's...................................................................................348
19.7
Summary.....................................................................................................................351
20
SHAREPOINT FRAMEWORK EXTENSIONS................................................................352
20.1
Extensions Overview....................................................................................................353
20.2
Creating Extensions......................................................................................................354
20.3
Appliation Customizers ................................................................................................356
20.4
Field Customizers.........................................................................................................358
20.5
Command Sets.............................................................................................................360
20.6
LAB - Consuming Microsoft Graph from an application extension..................................363
20.6.1
Create the extension......................................................................................................... 363
20.6.2
Adding Permissions........................................................................................................... 364
20.6.3
Getting the data................................................................................................................ 366
20.6.4
Rendering the data............................................................................................................ 368
21
WEBPACK ............................................................................................................................373
21.1
Introduction ................................................................................................................374
21.2
Entries and Outputs .....................................................................................................376
21.3
Loaders........................................................................................................................379
21.4
Plugins.........................................................................................................................381
21.5
Tree Shaking................................................................................................................382
21.6
Summary.....................................................................................................................383
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
20
SharePoint Framework
2.3
MODERN TOOLCHAIN
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework
21
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
22
SharePoint Framework
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework
23
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
24
SharePoint Framework
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
JavaScript: The Language
71
7.2
VARIABLES
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
72
JavaScript: The Language
7.3
TYPES
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
JavaScript: The Language
73
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
74
JavaScript: The Language
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
JavaScript: The Language
75
7.4
OBJECTS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
202
Build and Deploy a Framework solution
13.2
BUNDLING
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Build and Deploy a Framework solution
203
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
204
Build and Deploy a Framework solution
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Build and Deploy a Framework solution
205
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
206
Build and Deploy a Framework solution
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
242
SharePoint Framework and React
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework and React
243
15.9
COMPONENT PROPERTIES
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
244
SharePoint Framework and React
15.10
COMPONENT STATE
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework and React
245
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
246
SharePoint Framework and React
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework and React
273
LISTSITEPERMISSIONS.TSX
public render(): React.ReactElement<IListSitePermissionsProps> {
return (
<div className={styles.listSitePermissions}>
<div className={styles.container}>
<PermissionList permissionSet={this.state.permissionSet}
onRoleAssignmentSelect={(ra) => this.handleRoleAssignmentSelect(ra)} />
</div>
</div>
);
}
Now, let’s implement the handleRoleAssignmentSelect method. We will store the selected object in
the state, so let’s extend that first.
LISTSITEPERMISSIONS.TSX
export interface IListSitePermissionsState {
permissions: ISPRoleAssignment[];
selectedRoleAssignment?: ISPRoleAssignment;
}
Add this method inside the class:
private handleRoleAssignmentSelect(roleAssignment:ISPRoleAssignment): void{
console.log(roleAssignment);
this.setState({
selectedRoleAssignment:roleAssignment
});
}
Test your project in the SharePoint Online workbench!
Make sure you see the selected role assignment object in the console output.
15.18.3 CREATE THE GROUP DETAILS COMPONENT
Now that we have our selected group object, we want to show it’s members!
For this, we will create a new component. Add a new file to the components/permissions folder
named GroupDetails.tsx.
The properties will contain the selected role assignment and it’s users.
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
274
SharePoint Framework and React
GROUPDETAILS.TSX
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from '../ListSitePermissions.module.scss';
import { ISPUser, ISPRoleAssignment } from
'../../../../interfaces/PermissionInterfaces';
export interface IGroupDetailsProps {
selectedRoleAssignment?: ISPRoleAssignment;
}
export default class GroupDetails extends React.Component<IGroupDetailsProps,
{}>{
}
15.18.4 USE THE MEMBER DATA IN THE COMPONENT
Now, let’s render the user data!
GROUPDETAILS.TSX
public render(): React.ReactElement<IGroupDetailsProps> {
if (!this.props.selectedRoleAssignment ||
!this.props.selectedRoleAssignment.Member.Users) {
return <div />;
} else {
var users = this.props.selectedRoleAssignment.Member.Users.map((user:
ISPUser) =>
<div className={css('ms-Grid-col ms-u-sm11 ms-u-md3 ms-bgColor-
themePrimary', styles.element)} key={user.Title}>{user.Title}</div>
);
return (
<div className="ms-Grid ms-fontColor-white">
<div className="ms-Grid-row ms-u-sm11 ms-font-xl ms-fontColor-
themePrimary">Group Members</div>
<div className="ms-Grid-row">
{users}
</div>
</div>
);
}
}
15.18.5 ADD THE GROUP DETAILS COMPONENT TO MAIN COMPONENT
Now let’s use our new component. Add it to the main component.
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework and React
275
LISTSITEPERMISSIONS.TSX
import GroupDetails from './permissions/GroupDetails';
…
public render(): JSX.Element {
return (
<div className={styles.listSitePermissions}>
<div className={styles.container}>
<PermissionList permissionSet={this.state.permissionSet}
onRoleAssignmentSelect={this.handleRoleAssignmentSelect} />
<GroupDetails
selectedRoleAssignment={this.state.selectedRoleAssignment} />
</div>
</div>
);
}
Test!
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
276
SASS
16
SASS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
277
16.1
WHAT IS SASS?
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
285
16.5
COMMENTS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
286
SASS
16.6
NESTED RULES AND PROPERTIES
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
287
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
288
SASS
16.7
PARTIALS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
289
16.8
EXTEND
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
297
16.11.4 EXTENDING THE SCSS FILE
In this part of the lab we will create some base content for the SCSS file.
1.
First, let’s define some color variables:
SASSWPWEBPART.MODULE.SCSS
$accentColor: #ffca60;
$bgColor: #f4f4f4;
$cardColor: #FFFFFF;
$fontColor: #3a3938;
2.
Add some new classes for our elements. Notice the nesting of the classes, this will result in relational
selectors in css. We are using our accent color for the title and the border.
Also notice the nested margin declaration.
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
298
SASS
SASSWPWEBPART.MODULE.SCSS
.sassWp {
color:$fontColor;
width: 100%;
.container {
margin: 0px auto;
background-color: $bgColor;
.sites{
margin-right: 20px;
.site {
background-color: $cardColor;
float:left;
height: 240px;
width: 200px;
margin: {
left: 20px;
top: 20px;
bottom: 20px;
right: 0;
}
.title{
height:60px;
overflow: hidden;
padding: 20px 10px;
color:$accentColor;
}
}
}
}
}
.clearfix{
clear: both;
}
3.
Now modify the html to use our new classes
SASSWPWEBPART.TS
public render(): void {
let siteData = this.sites.map(
(s) => `
<div class="${styles.site}">
<div class="${styles.title}">
${s.Title}
</div>
</div>`
);
this.domElement.innerHTML = `
<div class="${ styles.sassWp }">
<div class="${ styles.container }">
<div class="${ styles.sites }">
${siteData.join('')}
</div>
<div class="${styles.clearfix}"></div>
</div>
</div>`;
}
4.
Check the result!
5.
Other interesting data to store in variables are for instance font settings and default sizes for padding,
margin and borders. Add the following font variables:
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
299
SASSWPWEBPART.MODULE.SCSS
// Font
$defaultFont: "Segoe UI WestEuropean","Segoe UI",-apple-
system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
$defaultFontSize: 20px;
.sassWp {
font: {
family: $defaultFont;
size: $defaultFontSize;
}
…
}
6.
Check the result!
16.11.5 NESTING AND EXTENDING
Working with variables in SCSS files is already a great optimization, but we could go one step further.
1.
Add the following hover selector to the .site class
SASSWPWEBPART.MODULE.SCSS
&:hover{
background-color: lighten($accentColor, $amount: 20);
transition: {
property:background-color;
duration: 0.3s;
}
.title{
color:darken($accentColor,40);
}
}
2.
The ampersand (&) in the previous code specifies that it needs to be applied on the parent element. In this
case .site. When the SASS code is transpiled into CSS, it will be outputted as:
.site:hover {
…
}
3.
Also notice darken and lighten in the code snippet. This is a built-in SASS function that can make the
specified color darker or lighter by the specified amount.
4.
Let’s extend the title class. Create a new class .subtitle inside .site .
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
300
SASS
SASSWPWEBPART.MODULE.SCSS
.subtitle{
@extend .title;
font: {
size: 60%;
style: italic;
}
padding-top:5px;
}
5.
Modify the html to add the subtitle
SASSWPWEBPART.TS
let siteData = this.sites.map(
(s) => `
<div class="${styles.site}">
<div class="${styles.title}">
${s.Title}
</div>
<div class="${styles.subtitle}">
${s.WebTemplate}
</div>
</div>`
);
16.11.6 MIXINS
1.
Next, we are going to add the site logo to the top of the site element. First add a new class .logo inside the
.site class. For the background settings, we will use a mixin, add it at the top below the variables.
SASSWPWEBPART.MODULE.SCSS
//mixins
@mixin back-stretch($backgroundColor:$accentColor){
background: {
position: 50%;
color: $backgroundColor;
size: cover;
}
}
…
.site{
…
.logo{
height:80px;
width:200px;
border: 0px solid $accentColor;
border-bottom-width: 5px;
@include back-stretch();
}
}
2.
Now add the necessary html to the web part
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SASS
301
SASSWPWEBPART.TS
let siteData = this.sites.map(
(s) => `
<div class="${styles.site}">
<div class="${styles.logo}"
${s.SiteLogoUrl ? "style='background-image:url(" + s.SiteLogoUrl +
");'":""}> </div>
<div class="${styles.title}">
${s.Title}
</div>
<div class="${styles.subtitle}">
${s.WebTemplate}
</div>
</div>`
);
3.
Test!
4.
Now pass in a new color to the mixin for immediate effect!
@include back-stretch($fontColor);
16.11.7 CHECKING THE GENERATED CSS CODE
Right now, you already made a couple of changes to the SCSS file, but what code is generated?
1.
Open the SassWp.module.css file which is located in the ./lib/webparts/sassWp/folder
2.
When you open it, you should see that it is minimized (everything is written on one line). You
can use a website (search on beautify css code) or Visual Studio Code extension to beautify
the code
a.
3.
When you “beautified” your CSS code, you should see the result of the SCSS file compilation
16.11.8 EXTRA: CREATING A NEW SCSS FILE
When you want to create a new scss file, you should name it <name>.module.scss. This automatically
generates the corresponding TypeScript file: <name>.module.scss.ts.
Load the file as follows in your web part:
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
302
SASS
import newStyles from './corporate.module.scss';
16.11.9 EXTRA: DISABLING AUTOMATIC RENAMING OF CSS CLASSES
By default, all the classes which you create get a unique suffix. This is great when you are building or
using multiple web parts that all need to be placed on the same page. That way they will not
overwrite each other’s CSS code when the same class names are used.
Of course, it might happen that you already have a corporate stylesheet/snippet gallery and you do
not want these automatic classes in your code. All you need to do is add a new SCSS file to you web
part directory without module in its name (<name.scss>) and load it as follows in your web part:
require('./corporate.scss');
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Office UI Fabric
303
17
OFFICE UI FABRIC
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
304
Office UI Fabric
17.1
WHAT IS OFFICE UI FABRIC?
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Office UI Fabric
305
17.2
OFFICE UI FABRIC VERSIONS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
312
Office UI Fabric
17.6
FABRIC JS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Office UI Fabric
313
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
314
Office UI Fabric
17.7
NGOFFICEUIFABRIC
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Office UI Fabric
315
17.8
FABRIC REACT
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
316
Office UI Fabric
17.9
LAB – USING OFFICE UI FABRIC REACT COMPONENTS
In this lab we will load some local data and show it using Office UI Fabric components.
17.9.1
BEFORE YOU START
The only starter file you need for this lab is the facilities.json file. We will copy it into the project after
it has bene generated. Ask your trainer for the file.
17.9.2
CREATE THE PROJECT
Run the following code in the node command prompt
md facilitiesproject
cd facilitiesproject
yo @microsoft/sharepoint
Fill out the details as below:
Now let’s step through the wizard. Add the following details:
33. Solution name: Facilities
34. Baseline packages: SharePoint Online Only
35. Files location: Pick “Use the current folder” (use the arrow keys)
36. Tenant Deployment: y
37. Client-side component type: WebPart
38. Webpart name: Facilities
39. Webpart description: Web part to show the company facilities
40. Framework: Pick “React”
Start Visual Studio Code and run the project
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
318
Office UI Fabric
FACILITIES.TSX
public render(): React.ReactElement<IFacilitiesProps> {
var facilities = this.state.items.map(
(f) => <tr><td><b>{f.name}</b></td><td>{f.status}</td></tr>
);
return (
<div className={styles.facilities}>
<div>This is the <b>{this.props.description}</b> webpart.</div>
<table><tbody>
{facilities}
</tbody></table>
</div>
);
}
Test the project! You should see the data listed!
17.9.4
IMPROVE THE APPEARANCE
The previous output was just plain html! Let’s visualize the data using Office UI Fabric components.
These use the Office UI Fabric CSS out of the box.
Let’s make sure we have the office ui fabric package. Run the following command to see the installed
version: (stop gulp first)
npm list office-ui-fabric-react
Add the import at the top of the component to use the component DetailsList. Also the
SelectionMode will be needed, so import it.
FACILITIES.TSX
import
{
DetailsList,
SelectionMode
} from 'office-ui-fabric-react';
Now let’s use the component!
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Office UI Fabric
319
FACILITIES.TSX
public render(): React.ReactElement<IFacilitiesProps> {
return (
<div className={styles.facilities}>
<div className="ms-font-su"> { this.props.description }</div>
<div className="ms-Grid">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-u-sm6">
<DetailsList
items={ this.state.items }
selectionMode={ SelectionMode.single }
columns={[
{
key: "status",
name: "Status",
fieldName: "status",
minWidth: 60
},
{
key: "name",
name: "Name",
fieldName: "name",
minWidth: 180
}
]} />
</div>
</div>
</div>
</div>
);
}
Check the result! Already looks better right?
Now let’s override the column output in the case of the status field. What we want to show is a
status icon.
FACILITIES.TSX
First let’s call a method when rendering the columns. Add the following to the DetailsList component
<DetailsList
items={ this.state.items }
…
onRenderItemColumn={ this.renderItemColumn }
Add the function inside the class definition! Don’t forget the inside the div.
private renderItemColumn(item, index, column)
{
const fieldContent = item[column.fieldName];
switch (column.key)
{
case 'status':
return <div style={ { backgroundColor: fieldContent, borderRadius:
"16px", width: "16px", marginLeft: "6px" } }> </div>;
default:
return <span>{ fieldContent }</span>;
}
}
Test again!
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
320
Office UI Fabric
Now let us make sure we have the possibility of selecting an item. We sill store that
item in the component state.
FACILITIES.TSX
export interface IFacilitiesState
{
items?: any;
selectedItem?: any;
}
Now set the selectedItem from the DetailsList Component
onActiveItemChanged={(item) => this.setState({ selectedItem: item })}
Good job ;)
17.9.5
ADD A SECOND REACT COMPONENT
When a facility has been selected we will render the details on a second component.
Add a new React component called “facility.tsx” to the “facilities/components” folder. In this
component, we will pass in the selected facility through the properties.
FACILITY.TSX
import * as React from 'react';
export interface IFacilityProps {
item?: any;
}
export default class Facility extends React.Component<IFacilityProps, {}> {
public render(): JSX.Element {
return (
<div>
{this.props.item ? this.props.item.name : ''}
</div>
);
}
}
Now import this new component and use it!
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Office UI Fabric
321
FACILITIES.TSX
import Facility from './Facility';
Add the following to facilities.tsx, beneath the div that added the DetailsList:
<div className="ms-Grid-col ms-u-sm6">
<Facility item={this.state.selectedItem}
</div>
/>
Good! Test again and check that the Facility name appears when an item is selected!
17.9.6
USE FABRIC COMPONENTS TO RENDER THE FACILITY DETAILS
Time to make it look better!
Import the following components from Fabric:
FACILITY.TSX
import
{
DocumentCard,
DocumentCardPreview,
DocumentCardActivity,
DocumentCardTitle
} from 'office-ui-fabric-react';
Good, now modify the render method and use the components!
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
322
Office UI Fabric
FACILITY.TSX
export default class Facility extends React.Component<IFacilityProps, {}> {
private _blobUrl = 'https://spfxlabs.blob.core.windows.net/ouif/';
public render(): JSX.Element {
var imgSrc = this.props.item ?
[{
previewImageSrc:
`${this._blobUrl}${this.props.item.name.toLowerCase()}.jpg`
}] : [];
var ppl = this.props.item ?
[{
name: this.props.item.facilitiesManagerName,
profileImageSrc: `${this._blobUrl}avatar-
${this.props.item.facilitiesManagerAlias}.jpg`
}] : [];
return (
<DocumentCard>
<DocumentCardTitle title={this.props.item ?
this.props.item.name : ''} />
<DocumentCardPreview previewImages={imgSrc} />
<DocumentCardActivity
activity='Facility Manager'
people={ppl}
/>
</DocumentCard>
);
}
}
That’s it! Let’s test!
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Dynamic Data
323
18
DYNAMIC DATA
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
324
Dynamic Data
18.1
INTRODUCTION
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Dynamic Data
325
18.2
EXPOSING DATA
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
326
Dynamic Data
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Dynamic Data
327
18.3
CONSUMING DATA
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
328
Dynamic Data
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Dynamic Data
329
18.4
DYNAMIC DATA FROM CODE
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
330
Dynamic Data
18.5
ADVANCED CONFIGURATION
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Consuming AAD secured API's
335
19.2
MICROSOFT GRAPH API
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
336
Consuming AAD secured API's
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Consuming AAD secured API's
337
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
338
Consuming AAD secured API's
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Consuming AAD secured API's
339
19.3
CONSUMING THE MICROSOFT GRAPH API
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
352
SharePoint Framework Extensions
20
SHAREPOINT FRAMEWORK EXTENSIONS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework Extensions
353
20.1
EXTENSIONS OVERVIEW
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
354
SharePoint Framework Extensions
20.2
CREATING EXTENSIONS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
SharePoint Framework Extensions
355
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
356
SharePoint Framework Extensions
20.3
APPLIATION CUSTOMIZERS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Webpack
375
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
376
Webpack
21.2
ENTRIES AND OUTPUTS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Webpack
377
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
378
Webpack
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Webpack
379
21.3
LOADERS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
380
Webpack
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Webpack
381
21.4
PLUGINS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
382
Webpack
21.5
TREE SHAKING
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Webpack
383
21.6
SUMMARY
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
384
Gulp
22
GULP
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Gulp
385
22.1
GULP
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
386
Gulp
22.2
INSTALLING GULP
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Gulp
387
22.3
GLOBS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
388
Gulp
22.4
GULP PRIMITIVES
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Gulp
389
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
390
Gulp
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Gulp
391
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
392
Gulp
22.5
GULP EXAMPLES
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Extending gulp tasks
393
23
EXTENDING GULP TASKS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
394
Extending gulp tasks
23.1
DEFAULT TASKS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Extending gulp tasks
395
23.2
CUSTOM TASKS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
396
Extending gulp tasks
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Extending gulp tasks
397
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
398
Extending gulp tasks
23.3
INTEGRATE IN THE BUILD PROCESS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Extending gulp tasks
399
23.4
AUTOMATE DEPLOYMENT
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
400
Extending gulp tasks
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Testing PSFx web parts
401
24
TESTING PSFX WEB PARTS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
402
Testing PSFx web parts
24.1
TEST FRAMEWORKS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Testing PSFx web parts
403
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
404
Testing PSFx web parts
24.2
RUNNING TESTS
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Testing PSFx web parts
405
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
406
Testing PSFx web parts
24.3
COMPONENT TESTING
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be
Testing PSFx web parts
407
Copyright 2000- 2018 by U2U Training nv/sa, Belgium – For use in U2U courses only. Visit www.u2u.be